<template>
    <action-bar :actionBarData="actionBarData" @search="searchInfo" @clearInput="getAllUserInfo"></action-bar>
    <div class="user-list">
        <el-table class="table-data" ref="tableRef" :data="tableList" style="width: 100%" max-height="250">
            <el-table-column v-if="isDeleteBatch" class="selection" fixed type="selection"/>
            <el-table-column class="index" fixed type="index" label="编号" />
            <el-table-column prop="uid" sortable label="uid" width="190" />
            <el-table-column prop="u_email" sortable label="邮箱" width="190" />
            <el-table-column prop="user_id" sortable label="账号" width="150" />
            <el-table-column prop="nickname" label="昵称" width="150" />
            <el-table-column prop="avator" label="头像" width="100">
                <template #default="scope">
                    <div class="img-preview" style="display: flex; align-items: center" v-if="scope.row.avator">
                        <viewer>
                            <img :src="scope.row.avator">
                        </viewer>
                    </div>
                    <div style="display: flex; align-items: center" v-else>
                        暂无图片
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="signature" label="个性签名" width="190">
                <template #default="scope">
                    <div :title="scope.row.signature">{{ scope.row.signature }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="190" />
            <el-table-column prop="birthday" sortable label="生日" width="190" />
            <el-table-column prop="area" label="地区" width="190" />
            <el-table-column fixed="right" label="操作" width="90" class-name="handle-cell">
                <template #default="scope">
                    <div class="b-l_handle">
                        <!-- <el-button link type="primary" size="small" @click.prevent="updataRow(scope.row)">
                            <div></div>
                            更改
                        </el-button> -->
                        <button class="table-fix-btn t-delete-btn" @click.prevent="deleteRow(scope.$index, scope.row)">
                            注销
                        </button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="table-footer">
            <div class="f-l-r">
                <el-checkbox v-model="isDeleteBatch" label="批量删除" style="margin-right: 1rem;" @change="isShowDeleteSelection"/>
                <el-button type="danger" class="delete-btn" @click.prevent="getDeleteData">批量删除</el-button>
            </div>
            <Pagination :list="userInfoList" @getTableList="getTableList"></Pagination>
        </div>
    </div>
    <dialog-alert v-if="isdeleteAlert" :data="deleteAlertData" @on-confirm="onConfirm" @on-close="onConcel">
        <div>
            <h2>是否注销下列选中的账号？</h2>
            <el-table :data="deleteDate" style="width: 100%" max-height="250" class="delete-table">
                <el-table-column class="index" fixed type="index" label="编号" />
                <el-table-column prop="uid" label="uid" width="200" />
                <el-table-column prop="u_email" label="邮箱" width="200"/>
                <el-table-column prop="user_id" label="账号" width="200" />
                <el-table-column prop="nickname" label="昵称"/>
            </el-table>
        </div>
    </dialog-alert>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { IUserInfoListModel } from '../manage-user.model'
import manageUserStore from '../manage-user.store'

const manageUserSe = manageUserStore()

// 头部工具栏数据
const actionBarData = {
    addButtonMsg: '',
    inputPlaceholder2: '按用户uid搜索',
    inputPlaceholder3: '按账号搜索'
}

// 获取全部用户信息
let userInfoList = ref<IUserInfoListModel[]>([])
const getAllUserInfo = () => {
    manageUserSe.getAllUserInfo().then((res: any) => {
        if(res.status == 'success') {
            userInfoList.value = res.results
        }
    })
}

// 搜索用户信息
const searchInfo = (type: string, value: string) => {
    const data = {
        searchType: type == '2' ? 'uid' : 'userId',
        searchText: value
    }
    manageUserSe.getSearchUserInfoByUidOrUserId(data).then((res: any) => {
        if(res.status == 'success') {
            userInfoList.value = res.results
        }
    })
}

// 获取分页后需要显示的数据
let tableList = ref([])
const getTableList = (value: any) => {
    tableList.value = value
    tableRef.value.setScrollTop(0)
}

onMounted(() => {
    getAllUserInfo()
})

// 删除
// 批量删除
let isDeleteBatch = ref<boolean>(false)
const deleteBatch = () => {
    isDeleteBatch.value = !isDeleteBatch
}
let deleteDate = ref<any>([])
let isdeleteAlert = ref<boolean>(false)
let deleteIndex = ref<number>(-1) // 当前注销的账号的索引
const deleteRow = (index: number, value: any) => {
    isdeleteAlert.value = true
    deleteIndex.value = index
    deleteDate.value = [value]
}
// 获取选中需要删除的数据
let tableRef = ref<any>(null)
const getDeleteData = () => {
    deleteDate.value = tableRef.value.getSelectionRows()
    if(deleteDate.value.length < 1) {
        ElMessage({
            showClose: true,
            message: '请先选择需要删除的数据！',
            type: 'warning',
        })
        return
    }
    isdeleteAlert.value = true
}
// 点击批量输出的checkbox
const isShowDeleteSelection = () => {
    if(!isdeleteAlert.value) tableRef.value.clearSelection()
}

// 询问用户是否删除弹窗
// 弹窗数据
const deleteAlertData = computed(() => {
    return {
        title: '注销用户账号',
        message: '',
        confirmTitle: '删除',
        isShowCancleBtn: true,
        cancleTitle: '取消',
        isShowClose: true,
        size: 'large'
    }
})
// 取消删除
const onConcel = () => {
    isdeleteAlert.value = false
} 
// 确认删除
const onConfirm = () => {
    let uidString = ''
    deleteDate.value.forEach((item: any, index: any) => {
        if(index == (deleteDate.value.length - 1)) {
            uidString += `'${ item.uid }'`
        } else {
            uidString += `'${ item.uid }',`
        }
    })
    const data = {
        uid: uidString
    }
    console.log(data)
    manageUserSe.getDeleteUserById(data).then((res: any) => {
        if(res.status == 'success') {
            tableList.value.splice(deleteIndex.value, 1)
            isdeleteAlert.value = false
            getAllUserInfo()
            ElMessage({
                showClose: true,
                message: '删除成功！',
                type: 'success',
            })
        } else {
            ElMessage.error('删除失败！')
        }
    })
}
</script>

<style lang="less" scoped>
.user-list {
    width: 100%;
    background-color: var(--pc-bg-white);
    margin-top: 1rem;
    border-radius: 0.5rem;
    padding: 1rem 0;
    padding-top: 0rem !important;
    flex: 1;
    background-color: var(--pc-bg-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    :deep(.cell) {
        height: 2.5rem;
        -webkit-line-clamp: 2;
    }
    .cell .img-preview > div > img {
        width: 45px;
        height: 45px;
    }
    :deep(.el-table_2_column_12) {
        padding: 0 !important;
    }
}
</style>